<template>
  <div class="yun-page">
    <div class="yun-card" style="overflow: hidden">
      <img
        class="yun-img1"
        src="@/assets/img/home/bg1.png"
        alt=""
        v-if="creenWidth > 480"
      />
      <img
        class="yun-img1"
        src="@/assets/img/app/home/bg1.png"
        alt=""
        v-if="creenWidth < 480"
      />
      <div class="yun-card1">
        <h3 class="yun-title">{{ homeData.card1.title }}</h3>
        <p class="yun-sbtitle">{{ homeData.card1.sbtitle }}</p>
        <a href="http://www.exploitnetwork.com/ensa/" target="_blank" rel="noopener noreferrer"><div class="yun-btn">{{ homeData.card1.btnword }}</div></a>
      </div>
    </div>
    <div class="yun-card">
      <img src="@/assets/img/home/bg2.png" alt="" v-if="creenWidth > 480" />
      <img src="@/assets/img/app/home/bg2.png" alt="" v-if="creenWidth < 480" />
      <div class="yun-card2">
        <div class="yun-left">
          <h3 class="yun-title">{{ homeData.card2.title }}</h3>
          <p class="yun-doc">
            {{ homeData.card2.doc }}
          </p>
        </div>
        <div class="yun-right">
          <img src="@/assets/img/home/card1.png" alt="" />
        </div>
      </div>
    </div>
    <div class="yun-card" style="overflow: hidden">
      <img src="@/assets/img/home/bg3.png" v-if="creenWidth > 480" alt="" />
      <img src="@/assets/img/app/home/bg3.png" v-if="creenWidth < 480" alt="" />
      <div class="yun-point3">
        <img src="@/assets/img/points.png" alt="" />
      </div>
      <div class="yun-card3" >
        <div class="yun-left">
          <img class="yun-img3" :src="homeData.cardimg" alt="" />
        </div>
        <div class="yun-right">
          <h3 class="yun-title">{{ homeData.card3.title }}</h3>
          <p class="yun-doc">
            {{ homeData.card3.doc1 }}
          </p>
          <p class="yun-doc yun-doc2">
            {{ homeData.card3.doc2 }}
          </p>
        </div>
      </div>
    </div>
    <div class="yun-card">
      <img src="@/assets/img/home/bg4.png" alt="" v-if="creenWidth > 480" />
      <img src="@/assets/img/app/home/bg4.png" alt="" v-if="creenWidth < 480" />
      <div class="yun-card4" >
        <h3 class="yun-title">{{ homeData.card4.title }}</h3>
        <p class="yun-doc">
          {{ homeData.card4.doc }}
        </p>
      </div>
    </div>
    <div class="yun-card" style="overflow: hidden">
      <img src="@/assets/img/home/bg5.png" v-if="creenWidth > 480" alt="" />
      <img src="@/assets/img/app/home/bg5.png" v-if="creenWidth < 480" alt="" />
      <div class="yun-point51">
        <img src="@/assets/img/points.png" alt="" />
      </div>
      <div class="yun-point52">
        <img src="@/assets/img/points.png" alt="" />
      </div>
      <div class="yun5-vbg"></div>
      <div class="yun-card5" >
        <h3 class="yun-title">{{ homeData.card5.title }}</h3>
        <div class="yun-list">
          <div
            class="yun-item"
            v-for="(item, index) in homeData.card5.list"
            :key="index"
          >
            <img class="yun-item-icon" :src="item.icon" alt="" />
            <div class="yun-item-title">{{ item.title }}</div>
            <div class="yun-item-doc">{{ item.doc }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="yun-card">
      <img src="@/assets/img/home/bg6.png" alt="" v-if="creenWidth > 480" />
      <img src="@/assets/img/app/home/bg6.png" alt="" v-if="creenWidth < 480" />
      <div class="yun6-vbg"></div>
      <div class="yun-card6" >
        <div class="yun-title">{{ homeData.card6.title }}</div>
        <div class="yun-list">
          <div
            class="yun-item"
            v-for="(item, index) in homeData.card6.list"
            :key="index"
          >
            <div class="yun-item-title">{{ item.title }}</div>
            <div class="yun-item-doc">
              {{ item.doc }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="yun-card">
      <div class="blue-card"></div>
      <div class="yun-card7">
        <div class="yun-points">
          <img src="@/assets/img/points.png" alt="" />
        </div>
        <div class="yun-left">
          <h3 class="yun-title" style='max-width:400px;'>{{ homeData.card7.title }}</h3>
          <a :href="homeData.pdf" target="_blank" rel="noopener noreferrer"><div class="yun-btn">{{ homeData.card7.btn }}</div></a>
        </div>
        <div class="yun-right">
          <img src="@/assets/img/app.png" alt="" />
        </div>
      </div>
    </div>

    <div class="yun-card">
      <img src="@/assets/img/home/bg7.png" v-if="creenWidth > 480" alt="" />
      <img src="@/assets/img/app/home/bg7.png" v-if="creenWidth < 480" alt="" />

      <div class="yun-card8">
        <h3 class="yun-title">{{ homeData.card8.title }}</h3>
        <p class="yun-sbtitle">{{ homeData.card8.sbtitle }}</p>
        <div class="yun-list">
          <div
            class="yun-card-item"
            v-for="(item, index) in homeData.card8.list"
            :class="{ active: activeId == item.id }"
            :key="index"
          >
            <div class="yun-card-head" @click="showProblemEvent(item.id)">
              <span>{{ item.title }}</span>
              <i class="selectIcon"></i>
            </div>
            <div class="yun-card-cont">
              <p v-for="(wp, index) in item.list" :key="index">{{ wp.P }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      homeData: this.$lang[this.$store.state.lang].home,
      activeId: 5,
      creenWidth: document.body.clientWidth,
      scrollTop: null,
    };
  },
  created() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    showProblemEvent(id) {
      this.activeId = this.activeId != id ? id : 0;
    },
    handleScroll() {
      this.scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
    },
  },
  watch: {
    "$store.state.lang"(val) {
      //变化之后根据自己项目需求写自身的逻辑代码，下面只是示例
      this.homeData = this.$lang[this.$store.state.lang].home;
    },
  },
};
</script>
<style lang='scss' scoped>
.yun-page {
  // max-width: 1920px;
  // min-width: 1500px;
  margin: 0 auto;
  .yun-card {
    width: 100%;
    position: relative;
    &>img{
      width:100%;
    }
    .yun-card1 {
      width:1200px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -45%);
      text-align: center;
      .yun-title {
        font-size: 36px;
        font-weight: bold;
        color: #31313b;
        animation: runkey2 1s;
      }
      .yun-sbtitle {
        font-size: 24px;
        color: #828282;
        margin-top: 25px;
        animation: runkey2 1.5s;
      }
      .yun-btn {
        width: 160px;
        height: 50px;
        border: 2px solid #404fe0;
        border-radius: 8px;
        color: #404fe0;
        text-align: center;
        line-height: 50px;
        margin: 40px auto 0;
        font-size: 16px;
        animation: runkey2 2s;
      }
    }
    .yun-card2 {
      width:1200px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .yun-left {
        width: 48%;
        .yun-title {
          font-size: 32px;
          font-weight: bold;
          color: #ffffff;
        }
        .yun-doc {
          font-size: 18px;
          color: #ffffff;
          line-height: 32px;
          margin-top: 20px;
          text-align: justify; // 所有行两端对齐
          text-justify: inter-ideograph;
        }
      }
      .yun-right {
        width:30%;
        overflow: hidden;
        position: relative;
        top: 36px;
        animation: runkey3 2s linear infinite alternate;
        img {
          width:100%;
        }
      }
    }
    .yun-card3 {
      width:1200px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .yun-left {
        width: 45%;
        img {
          width: 100%;
        }
      }
      .yun-right {
        width: 45%;
        .yun-title {
          font-size: 32px;
          font-weight: bold;
          color: #31313b;
        }
        .yun-doc {
          font-size: 18px;
          font-weight: 400;
          color: #828282;
          line-height: 32px;
          margin-top: 20px;
          text-align: justify; // 所有行两端对齐
          text-justify: inter-ideograph;
          &.yun-doc2 {
            margin-top: 20px;
          }
        }
      }
    }
    .yun-card4 {
      width:1200px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      .yun-title {
        font-size: 32px;
        font-weight: bold;
        color: #ffffff;
      }
      .yun-doc {
        margin-top: 20px;
        font-size: 24px;
        color: #ffffff;
        line-height: 47px;
      }
    }
    .yun5-vbg {
      position: absolute;
      top: 4%;
      left: 50%;
      transform: translate(-50%, 0);
      width:1100px;
      height: 96%;
      background: #3b95d3;
      opacity: 0.15;
      border-radius: 10px;
    }
    .yun-card5 {
      width: 1200px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .yun-title {
        text-align: center;
        font-size: 32px;
        font-weight: bold;
        color: #000000;
      }
      .yun-list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 40px;
        .yun-item {
          width: 360px;
          height: 320px;
          background: #ffffff;
          box-shadow: 0px 7px 29px 0px rgba(7, 17, 126, 0.16);
          border-radius: 10px;
          text-align: center;
          padding: 20px;
          cursor: pointer;
          margin-right: 30px;
          margin-bottom: 60px;
          &:nth-child(3n) {
            margin-right: 0;
          }
          &:hover {
            transform: scale(1.1);
          }
          .yun-item-icon {
            margin: 0 auto;
          }
          .yun-item-title {
            font-size: 20px;
            font-weight: bold;
            color: #31313b;
            margin-top: 20px;
          }
          .yun-item-doc {
            font-size: 16px;
            color: #828282;
            line-height: 24px;
            margin-top:12px;
          }
        }
      }
    }
    .yun6-vbg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1240px;
      height: 45%;
      background: #e2eff8;
      border-radius: 10px;
    }
    .yun-card6 {
      width:1200px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      .yun-title {
        text-align: center;
        font-size: 32px;
        font-weight: bold;
        color: #fff;
      }
      .yun-list {
        display: flex;
        // justify-content: center;
        flex-wrap: wrap;
        margin-top: 40px;
        .yun-item {
          width: 276px;
          height: 329px;
          background: #ffffff;
          box-shadow: 0px 18px 54px 0px rgba(7, 17, 126, 0.46);
          border-radius: 10px;
          text-align: center;
          padding: 25px 10px 20px;
          cursor: pointer;
          margin-right: 20px;
          margin-bottom: 20px;
          &:nth-child(4n) {
            margin-right: 0;
          }
          &:hover {
            transform: scale(1.1);
          }
          .yun-item-title {
            font-size: 20px;
            font-weight: bold;
            color: #31313b;
          }
          .yun-item-doc {
            font-size: 16px;
            color: #828282;
            line-height: 28px;
            margin-top: 10px;
          }
        }
      }
    }
    .blue-card {
      width: 45%;
      height: 80%;
      background: #e2eff8;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: -1;
    }
    .yun-card7 {
      width: 1000px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 40px;
      .yun-points {
        position: absolute;
        left: 46%;
        top: 60px;
        width: 160px;
        img {
          width: 100%;
        }
      }
      .yun-left {
        width: 45%;
        .yun-title {
          font-size: 32px;
          font-weight: bold;
          color: #31313b;
          line-height: 71px;
        }
        .yun-btn {
          width: 160px;
          height: 50px;
          background: #404fe0;
          box-shadow: 0px 18px 38px 0px rgba(7, 17, 126, 0.3);
          border-radius: 8px;
          font-size: 16px;
          color: #ffffff;
          text-align: center;
          line-height: 50px;
          margin-top: 90px;
          cursor: pointer;
        }
      }
      .yun-right {
        width: 40%;
        position: relative;
        top: 22px;
        z-index: 10;
        animation: runkey3 2s linear infinite alternate;
        img {
          width: 100%;
        }
      }
    }
    .yun-card8 {
      width: 1200px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .yun-title {
        text-align: center;
        font-size: 32px;
        font-weight: bold;
        color: #ffffff;
      }
      .yun-sbtitle {
        font-size: 18px;
        color: #ffffff;
        margin-top: 20px;
        text-align: center;
      }
      .yun-list {
        margin-top: 50px;
        .yun-card-item {
          padding: 0 48px;
          background: #fff;
          margin-bottom: 25px;
          .yun-card-head {
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            cursor: pointer;
            span {
              font-size: 20px;
              color: #202029;
            }
            i {
              display: block;
              width: 20px;
              height: 15px;
              background-image: url("~@/assets/img/home/icon-down.png");
              background-size: 100% 100%;
            }
          }
          .yun-card-cont {
            width: 100%;
            height: 0;
            overflow: hidden;
            border-top: 0px solid #3643cf;
            padding: 0 0;
            transition: all 0.2s linear;
            p {
              font-size: 16px;
              color: #626262;
              line-height: 24px;
              margin-bottom: 20px;
              span {
                color: #404fe0;
              }
            }
          }
          &.active {
            .yun-card-head {
              span {
                color: #3643cf;
              }
              i {
                display: block;
                width: 20px;
                height: 15px;
                background-image: url("~@/assets/img/home/icon-up.png");
                background-size: 100% 100%;
              }
            }
            .yun-card-cont {
              height: auto;
              border-top: 3px solid #3643cf;
              padding: 25px 0;
            }
          }
        }
      }
    }
  }
  .yun-img1 {
    animation: runkey1 2s linear 2s infinite alternate;
  }
  .yun-img3 {
    animation: runkey1 4s linear infinite alternate;
  }
  .yun-point3 {
    position: absolute;
    right: 0;
    top: 0;
    width: 160px;
    img {
      width: 100%;
    }
  }
  .yun-point51 {
    position: absolute;
    left: 8%;
    top: 20%;
    width: 160px;
    z-index: 0;
    img {
      width: 100%;
    }
  }
  .yun-point52 {
    position: absolute;
    right: 6%;
    bottom: 8%;
    width: 160px;
    img {
      width: 100%;
    }
  }
}
@media screen and (max-width: 480px) {
  .yun-page {
    width: 100%;
    margin: 0 auto;
    .yun-card {
      width: 100%;
      position: relative;
      & > img {
        width: 100%;
      }
      .yun-card1 {
        width: 80%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        padding-top: 40px;
        text-align: center;
        .yun-title {
          font-size: 24px;
          font-weight: bold;
          color: #31313b;
        }
        .yun-sbtitle {
          font-size: 14px;
          color: #828282;
          margin-top: 15px;
        }
        .yun-btn {
          width: 160px;
          height: 40px;
          border: 2px solid #404fe0;
          border-radius: 8px;
          color: #404fe0;
          text-align: center;
          line-height: 36px;
          margin: 20px auto 0;
          font-size: 16px;
          cursor: pointer;
        }
      }
      .yun-card2 {
        width: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        display: block;
        justify-content: space-between;
        align-items: center;
        .yun-left {
          width: 94%;
          margin: 15px auto;

          .yun-title {
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
            text-align: center;
          }
          .yun-doc {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
            margin-top: 10px;
            text-align: justify; // 所有行两端对齐
            text-justify: inter-ideograph;
          }
        }
        .yun-right {
          width: 90%;
          height: auto;
          margin: 0 auto;
          overflow: hidden;
          position: relative;
          top: -10px;
          &::after {
            clear: both;
          }
          img {
            float: right;
            width: 42%;
            height: auto;
          }
        }
      }
      .yun-card3 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        display: block;
        justify-content: space-between;
        align-items: center;
        padding-top: 90px;
        .yun-left {
          width: 90%;
          position: absolute;
          top: 56%;
          left: 50%;
          transform: translate(-50%, 0);
          img {
            width: 100%;
          }
        }
        .yun-right {
          width: 94%;
          position: absolute;
          top: 4%;
          left: 50%;
          transform: translate(-50%, 0);
          .yun-title {
            font-size: 24px;
            font-weight: bold;
            color: #31313b;
            text-align: center;
          }
          .yun-doc {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 300;
            color: #828282;
            font-weight: 400;
            color: #828282;
            line-height: 20px;
            margin-top: 15px;
            text-align: justify; // 所有行两端对齐
            text-justify: inter-ideograph;
            &.yun-doc2 {
              margin-top: 10px;
            }
          }
        }
      }
      .yun-card4 {
        width: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        padding-top: 8%;
        text-align: center;
        .yun-title {
          font-size: 24px;
          font-weight: bold;
          color: #ffffff;
        }
        .yun-doc {
          margin-top: 10px;
          font-size: 14px;
          color: #ffffff;
          line-height: 24px;
        }
      }
      .yun5-vbg {
        position: absolute;
        top: 2%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 80%;
        height: 98%;
        background: #3b95d3;
        opacity: 0.15;
        border-radius: 10px;
        // .yun-points1 {
        //   position: absolute;
        //   left: -140px;
        //   top: 120px;
        // }
        // .yun-points2 {
        //   position: absolute;
        //   right: -140px;
        //   bottom: 40px;
        // }
      }
      .yun-card5 {
        width: 100%;
        position: absolute;
        top: 3%;
        left: 50%;
        transform: translate(-50%, 0);
        .yun-title {
          text-align: center;
          font-size: 24px;
          font-weight: bold;
          color: #000000;
        }
        .yun-list {
          display: block;
          justify-content: center;
          flex-wrap: wrap;
          margin-top: 10px;
          .yun-item {
            width: 94%;
            margin: 0 auto 16px;
            height: auto;
            background: #ffffff;
            box-shadow: 0px 7px 29px 0px rgba(7, 17, 126, 0.16);
            border-radius: 10px;
            text-align: center;
            padding: 10px;
            cursor: pointer;
            &:nth-child(3n) {
              margin-right: auto;
            }
            &:hover {
              transform: scale(1.1);
            }
            .yun-item-icon {
              margin: 0 auto;
              width: 30px;
            }
            .yun-item-title {
              font-size: 20px;
              font-weight: bold;
              color: #31313b;
              margin-top: 6px;
            }
            .yun-item-doc {
              margin-top: 6px;
              font-size: 14px;
              color: #828282;
              line-height: 22px;
            }
          }
        }
      }
      .yun6-vbg {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 98%;
        height: 40%;
        background: #e2eff8;
        border-radius: 10px;
      }
      .yun-card6 {
        width: 100%;
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translate(-50%, 0);
        .yun-title {
          text-align: center;
          font-size: 24px;
          font-weight: bold;
          color: #fff;
        }
        .yun-list {
          display: block;
          // justify-content: center;
          flex-wrap: wrap;
          margin-top: 20px;
          .yun-item {
            width: 94%;
            height: auto;
            margin: 0 auto 20px;
            background: #ffffff;
            box-shadow: 0px 18px 54px 0px rgba(7, 17, 126, 0.46);
            border-radius: 10px;
            text-align: center;
            padding: 20px 15px 15px;
            cursor: pointer;
            &:nth-child(4n) {
              margin-right: auto;
            }
            &:hover {
              transform: scale(1.05);
            }
            .yun-item-title {
              font-size: 24px;
              font-weight: bold;
              color: #31313b;
            }
            .yun-item-doc {
              font-size: 14px;
              color: #828282;
              line-height: 22px;
              margin-top: 4px;
            }
          }
        }
      }
      .blue-card {
        width: 80%;
        height: 240px;
        background: #e2eff8;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: -1;
      }
      .yun-card7 {
        width: 100%;
        margin: 0 auto;
        display: block;
        justify-content: space-between;
        align-items: center;
        padding-top: 30px;
        .yun-points {
          position: absolute;
          left: -9%;
          top: 45%;
          width: 115px;
          height: 57px;
          img {
            width: 100%;
          }
        }
        .yun-left {
          width: 100%;
          .yun-title {
            font-size: 24px;
            font-weight: bold;
            color: #31313b;
            line-height: 32px;
            text-align: center;
            margin: 0 auto;
            width: 80%;
          }
          a{
            display: block;
            margin:0 auto;
          }
          .yun-btn {
            width: 180px;
            height: 40px;
            background: #404fe0;
            box-shadow: 0px 18px 38px 0px rgba(7, 17, 126, 0.3);
            border-radius: 4px;
            font-size: 14px;
            color: #ffffff;
            text-align: center;
            line-height: 40px;
            margin: 30px auto;
            cursor: pointer;
          }
        }
        .yun-right {
          width:100%;
          height: 300px;
          position: relative;
          top: 22px;
          right: 10px;
          display: flex;
          justify-content: flex-end;
          z-index: 10;
          img {
            height: 100%;
            width:auto;
          }
        }
      }
      .yun-card8 {
        width: 100%;
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translate(-50%, 0);
        .yun-title {
          text-align: center;
          font-size: 24px;
          font-weight: bold;
          color: #ffffff;
        }
        .yun-sbtitle {
          font-size: 16px;
          color: #ffffff;
          margin-top: 15px;
          text-align: center;
        }
        .yun-list {
          width: 90%;
          margin: 20px auto;
          .yun-card-item {
            padding: 0 15px;
            background: #fff;
            margin-bottom: 20px;
            .yun-card-head {
              width: 100%;
              height: 60px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              background: #fff;
              cursor: pointer;
              span {
                font-size: 16px;
                color: #202029;
              }
              i {
                display: block;
                width: 18px;
                height: 12px;
                background-image: url("~@/assets/img/home/icon-down.png");
                background-size: 100% 100%;
              }
            }
            .yun-card-cont {
              width: 100%;
              height: 0;
              overflow: hidden;
              border-top: 0px solid #3643cf;
              padding: 0 0;
              transition: all 0.2s linear;
              p {
                font-size: 14px;
                color: #626262;
                line-height: 24px;
                margin-bottom: 10px;
                span {
                  color: #404fe0;
                }
              }
            }
            &.active {
              .yun-card-head {
                span {
                  color: #3643cf;
                }
                i {
                  display: block;
                  width: 18px;
                  height: 12px;
                  background-image: url("~@/assets/img/home/icon-up.png");
                  background-size: 100% 100%;
                }
              }
              .yun-card-cont {
                height: auto;
                border-top: 3px solid #3643cf;
                padding: 20px 0;
              }
            }
          }
        }
      }
    }
    .yun-point3{
    position: absolute;
    right:0;
    top:0;
    width:100px;
    img{
      width:100%;
    }
  }
  .yun-point51{
    position: absolute;
    left:-12%;
    top:4%;
    width:110px;
    z-index: 10;
    img{
      width:100%;
    }
  }
  .yun-point52{
    position: absolute;
    right:-12%;
    bottom:48%;
    width:110px;
    img{
      width:100%;
    }
  }
  }
}
@keyframes runkey1 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes runkey2 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes runkey3 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes runkey4 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
</style>
